<template>
  <div class="add-footer">
    <van-tabbar v-model="tabIndex" route>
        <van-tabbar-item
          v-for="(tabbar, index) in tabbars"
          :key="tabbar.name"
          :to="tabbar.path"
          :icon="tabbar.meta.icon"
          :class="{ 'van-tabbar-item--active' : index === tabIndex }"
        >
          {{ tabbar.meta.title }}
          <span v-if="tabbar.name === 'Cart'" class="badge">{{ totalCount | overflow99  }}</span>
        </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import routes from '@/router/routes'
export default {
  name: 'Addfooter',
  data () {
    return {
      tabIndex: 0
    }
  },
  computed: {
    ...mapGetters(['totalCount']),
    // 底部导航根据routes来渲染，方便以后维护升级
    tabbars () {
      return routes.filter(route => route.meta.isTabbar)
    }
  },
  created () {
    this.tabbars.forEach((tab, index) => {
      // 从tabbars里取根据路由path取匹配修改tabIndex的默认值
      // 把tabIndex修改为当前路由所在的索引，否则刷新页面首页tab就会高亮
      if (tab.path === '/' + this.$route.path.split('/')[1]) {
        this.tabIndex = index
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.van-tabbar-item {
  position: relative;
}
.badge {
  position: absolute;
  left: 76px;
  top: 3px;
  padding: 1px 4px;
  border-radius: 10px;
  background-color: red;
  color: #fff;
}
</style>
